const less = require('less')
/* 
    source传入的参数
*   如果是最后在的或者说最右边的loader,参数就是模块的内容
*   如果不是最后一个,参数就是上一个loader返回的内容
*/
function loader(source) {
  //默认情况下loader的执行是同步的,如果调用了async方法,可以把loader的执行变成异步
  let callback = this.async()
  console.log('this.resource', this.resource)
  less.render(source, { filename: this.resource }, (err, output) => {
    console.log('css', output.css)
    // 1.这样写less-loader导出的是less转换后的css，并不是js，此时不能放在最左侧
    // callback(err, output.css)
    //2.less-loader想要可以放在最左侧使用，需要导出的是js脚本
    callback(null, `module.exports=${JSON.stringify(output.css)}`) // 这样可将less-loader放在最左侧，但单独使用是没作用的，等于导出了一段字符串,还需配合style-loader使用
  })
}

module.exports = loader
